<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getBannerDataAPI, getCategoryDataAPI, getHotDataAPI, getGuessDataAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import NavBar from '@/pages/index/components/NavBar.vue'
import HotPannel from '@/pages/index/components/HotPannel.vue'
import CategoryPanle from '@/pages/index/components/CategoryPanel.vue'
import type { Banner, Category, Guess, Hot } from '@/types/home';
import type { XtxGuessInstance } from '@/components/components'
import PageSkeleton from '@/pages/index/components/PageSkeleton.vue'


const BannerList = ref<Banner[]>([]);
const CategoryList = ref<Category[]>([]);
const HotList = ref<Hot[]>([]);
const GuessList = ref<Guess[]>([]);

const isTrigger = ref(false)
const loading = ref(true)


// Banner数据
const getBannerData = async () => {
  const res = await getBannerDataAPI()
  BannerList.value = res.result as Banner[];
}
//分类数据
const getCategoryData = async () => {
  const res = await getCategoryDataAPI()
  CategoryList.value = res.result as Category[];
}
//热门推荐
const getHotData = async () => {
  const res = await getHotDataAPI()
  HotList.value = res.result as Hot[]
}
//下拉刷新
const onRefresher = async () => {
  loading.value = true
  isTrigger.value = true
  guessRef.value?.resetData()
  await Promise.all([getBannerData(), getCategoryData(), getHotData(), guessRef.value?.getMore()])
  isTrigger.value = false
  loading.value = false
}
onLoad(async () => {
  await Promise.all([
    getBannerData(),
    getCategoryData(),
    getHotData()])

  loading.value = false
})
const guessRef = ref<XtxGuessInstance>();
const onScrollToLower = () => {
  guessRef.value?.getMore()

}
</script>

<template>

  <NavBar />
  <scroll-view class="scroll-view" :refresher-triggered="isTrigger" scroll-y refresher-enabled
    @refresherrefresh="onRefresher" @scrolltolower="onScrollToLower">

    <PageSkeleton v-if="loading" />
    <template v-else>
      <XtxSwiper :Banner="BannerList" />
      <CategoryPanle :_Category="CategoryList" />
      <HotPannel :Hot="HotList" />
      <XtxGuess ref="guessRef" />
    </template>

  </scroll-view>



</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
}
</style>
